package myJs.cps.myTable

import japgolly.scalajs.react._
import japgolly.scalajs.react.vdom.all._
import myJs.Implicits._
import myJs.cps.BootstrapTableCp.Column

import myJs.myPkg.i18n._
import myJs.tool.Pojo._

import scala.collection.immutable.SeqMap
import scala.scalajs.js
import cats.effect._
import japgolly.scalajs.react.util.EffectCatsEffect._

/** Created by yz on 15/9/2023
  */
object FilterConditionCp {

  case class Props(
      searchMap: SeqMap[String, SearchData],
      fieldColumnMap: SeqMap[String, Column],
      removeCondition: String => SyncIO[Unit]
  ) {
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>
    val t = ReactI18next.useT
    val searchMap = props.searchMap

    object FTool {

      def removeCondition(curField: String) = {
        props.removeCondition(curField)
      }

    }

    if (searchMap.nonEmpty) {
      div(
        marginBottom := 10.px,
        s"${t("filteringAndSort")}: ",
        span(
          id := "filterCondition",
          props.searchMap.toVdomArray { case (field, searchData) =>
            val column = props.fieldColumnMap(field)
            val eachFilterConditionE = searchData match {
              case DateSearchData(startDate, endDate) =>
                val trueStartDate = if (startDate.isEmpty) "None" else startDate
                val trueEndDate = if (endDate.isEmpty) "None" else endDate
                span(
                  className := "eachFilterCondition",
                  span(s"${column.title}"),
                  s" ${trueStartDate} - ${trueEndDate}"
                )
              case TextSearchData(searchType, text) =>
                val mulTexts = text.split(";").toList
                span(
                  className := "eachFilterCondition",
                  span(s"${column.title} "),
                  span(color := "red", s"${searchType.toLowerCase} "),
                  mulTexts.zipWithIndex.toVdomArray { case (x, curI) =>
                    val orSpan =
                      if (curI != mulTexts.size - 1) span(color := "#428CCB", " or ")
                      else
                        span()
                    span(key := s"${curI}", x, orSpan)
                  }
                )
              case NumericSearchData(min, max, kind) =>
                val trueMin = if (min.isEmpty) "None" else min
                val trueMax = if (max.isEmpty) "None" else max
                span(className := "eachFilterCondition", span(s"${column.title}"), s" ${trueMin} - ${trueMax}")
              case CheckboxSearchData(values) =>
                span(
                  className := "eachFilterCondition",
                  span(s"${column.title} "),
                  span(color := "red", "IN"),
                  s" ${values.map(x => column.optionMap.getOrElse(x, x)).mkString(",")}"
                )
              case OnlySortSearchData =>
                EmptyVdom
            }
            span(
              key := s"${field}",
              className := "eachFCParent",
              eachFilterConditionE,
              sup(
                className := "mySup myRemove",
                onClick --> FTool.removeCondition(column.field),
                i(className := "fa fa-times-circle")
              ),
              " "
            )
          }
        )
      )
    } else EmptyVdom

  }

}
